<template>
  <div class="all">
  <el-table :data="tableData"
            stripe
            style="width: 100%"
            >
    <el-table-column prop="name"
                     label="店名"
                     width="180">
    </el-table-column>
    <el-table-column prop="time"
                     label="下单时间"
                     width="180">
    </el-table-column>
    <el-table-column prop="state"
                     label="当前状态"
                     width="180">
    </el-table-column>
    <el-table-column>
      <template slot-scope="scope">
        <el-button   @click="order(scope.row.state)" style=" width:50%; margin-bottom:0px;">查看详情</el-button>
      </template>
      
      
    </el-table-column>
  </el-table>
  <el-container>
 <router-view></router-view>
  </el-container>
    </div>
</template>

<script>
  export default {
    data() {
      //在进入之前先从后台获取信息
      return {
        tableData: [{
          name: '17312973192',
          time: '17:31',
          state:'已支付'
        }, {
          name: '41261432215',
          time: '12:29',
          state:'未支付'
        }, {
          name: '13947283429',
          time: '11:02',
          state:'已完成'
        }, {
          name: '17023462782',
          time: '7:40',
          state:'已取消'
        }]
      }
    },
    methods: {
      
     order(state) {
  if(state=="已支付"){
        this.$router.replace('/my_info/myorder/paid/detail_paid');
  }
  else if(state=="未支付"){
        this.$router.replace('/my_info/myorder/unpay/detail_unpay');
  }
  else if(state=="已完成"){
        this.$router.replace('/my_info/myorder/finished/detail_finished');
  }
  else if(state=="已取消"){
        this.$router.replace('/my_info/myorder/cancelled/detail_cancelled');
  }

      }
    }
  }
</script>
